<template>
  <el-form-item :prop="prop" :rules="rules" label-width="auto" :label="label">
    <el-tag
      :key="item.name"
      v-for="item in que"
      :type="item.type"
      :closable="!notWrite"
      disable-transitions
      @close="deleteName(item)"
      @[click]="notWrite?'':chooseName(item)"
      class="tag-name"
      :class="{notclick:notWrite}"
    >{{item.name}}</el-tag>
    <el-input
      v-model.trim="inputName"
      style="width:300px"
      placeholder="请输入作者，每输入完毕一个姓名请回车"
      @change="submitName"
    ></el-input>
  </el-form-item>
</template>

<script>
export default {
  props: ["prop", "rules", "que", "notWrite", "label", "click"],
  data() {
    return {
      inputName: "",
    };
  },
  methods: {
    // 输入作者
    submitName(value) {
      let item = {
        name: value,
        type: "info",
      };
      this.que.push(item);
      this.inputName = "";
    },
    // 删除作者
    deleteName(tag) {
      if (!this.notWrite) {
        this.que.splice(this.que.indexOf(tag), 1);
      }
    },
    // 高亮通讯作者
    chooseName(tag) {
      if (!this.notWrite) {
        switch (tag.type) {
          case "info":
            tag.type = "";
            break;
          default:
            tag.type = "info";
        }
      }
    },
  },
};
</script>
<style scoped>
.tag-name {
  margin-right: 12px;
  margin-bottom: 12px;
}
.tag-name:hover {
  cursor: pointer;
}
.notclick {
  cursor: not-allowed !important;
}
</style>